<template>
	<view>
		<scroll-view class="scroll" scroll-x>
			<view class="group">
				<view class="item" v-for="day in dates" :key="day.date" @click="handleDayClick(day.date)"
					:class="{ 'selected': currentDay === day.date }">
					<view class="textitem1">{{ day.day }}</view>
					<view class="textitem2">{{ day.date }}</view>
				</view>
			</view>
		</scroll-view>
		<view class="nrbox">
			<view class="day">{{ currentDayContent }}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dates: [], // 存储日期和内容
				currentDay: new Date().toLocaleDateString('zh-CN').replace(/\//g, '-'), // 初始化为今天的日期
			};
		},
		computed: {
			currentDayContent() {
				const day = this.dates.find(d => d.date === this.currentDay);
				return day ? day.content : '';
			}
		},
		methods: {
			initDates() {
				const today = new Date();
				const currentMonth = today.getMonth() + 1;
				const lastMonth = currentMonth === 1 ? 12 : currentMonth - 1;
				const lastYear = currentMonth === 1 ? today.getFullYear() - 1 : today.getFullYear();

				// 获取当前月的所有日期
				const currentMonthDates = Array.from({
					length: 30
				}, (_, i) => {
					const date = new Date(today.getFullYear(), currentMonth - 1, i + 1);
					return {
						date: `${(date.getMonth() + 1).toString().padStart(2, '0')}.${(date.getDate()).toString().padStart(2, '0')}`,
						content: `这是${(date.getMonth() + 1)}.${(date.getDate())}的内容`,
						day: this.getDayOfWeek(date, today)
					};
				});

				// 获取上个月20号之后的所有日期
				const lastMonthDates = Array.from({
					length: 11
				}, (_, i) => {
					const date = new Date(lastYear, lastMonth - 1, 20 + i);
					return {
						date: `${(date.getMonth() + 1).toString().padStart(2, '0')}.${(date.getDate()).toString().padStart(2, '0')}`,
						content: `这是${(date.getMonth() + 1)}.${(date.getDate())}的内容`,
						day: this.getDayOfWeek(date, today)
					};
				});

				this.dates = [...lastMonthDates, ...currentMonthDates];
			},
			getDayOfWeek(date, today) {
				const days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
				if (date.getDate() === today.getDate() &&
					date.getMonth() === today.getMonth() &&
					date.getFullYear() === today.getFullYear()) {
					return '今天'; // 当天日期
				}
				return days[date.getDay()];
			},
			handleDayClick(day) {
				this.currentDay = day;
			}
		},
		onReady() {
			this.initDates();
		}
	}
</script>

<style>
	/* 滚动可视区域 */
	.scroll {
		margin: 10px 0;
		border: 1px solid red;
		box-sizing: border-box;
	}

	.group {
		width: 750rpx;
		white-space: nowrap;
	}

	.item {
		text-align: center;
		font-size: 25rpx;
		width: 200rpx;
		background-color: pink;
		display: inline-block;
		margin-right: 10rpx;
		color: #7e7e7e;
	}

	.item.selected {
		color: black;
	}

	.nrbox {
		height: 200rpx;
		width: 100%;
	}

	.day {
		font-size: 30rpx;
		text-align: center;
	}
</style>
